<template>
  <div id="login">
    <canvas id="canvas"></canvas>
    <div class="content">
      <div>
        <Icon type="ios-person-outline" size="30"></Icon>
        <i-input type="text" v-model="user.name" placeholder="用户名😆"></i-input>
      </div>
      <div>
        <Icon type="ios-locked-outline" size="30"></Icon>
        <i-input type="password" v-model="user.password" placeholder="密码😢" @on-enter="login"></i-input>
      </div>
      <i-button type="primary" @click="login">_(:з」∠)_</i-button>
    </div>
    <img src="../../assets/img/city.png" class="city">
    <img src="../../assets/img/moon.png" class="moon">
  </div>
</template>

<script>
  import Stars from '../../../static/js/Star.js';
  import Moon from '../../../static/js/Moon';
  import Meteor   from '../../../static/js/Meteor';
export default {
  data() {
    return {
      user: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    login() {
      this.$axios.post('login', this.user).then((res) => {
        sessionStorage.token = res
        this.$router.push('/home');
      })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  beforeCreated() {
  },
  created() {
  },
  mounted() {
    var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      width = window.innerWidth,
      height = window.innerHeight,
      // 实例化月亮和星星。流星是随机时间生成，所以只初始化数组
      moon = new Moon(ctx, width, height),
      stars = new Stars(ctx, width, height, 400),
      meteors = [],
      count = 0
    canvas.width = width;
    canvas.height = height;
    const meteorGenerator = () => {
      // x位置偏移，以免经过月亮
      const x = Math.random() * width + 800
      meteors.push(new Meteor(ctx, x, height))
      // 每隔随机时间，生成新流星
      setTimeout(() => {
        meteorGenerator();
      }, Math.random() * 2000);
    }
    const frame = () => {
      count ++;
      let o = Math.random();
      let i =  Math.random() * 400;
      count % 30 === 0 && stars.blink(o, i);
      moon.draw()
      stars.draw()
      meteors.forEach((meteor, index, arr) => {
        // 如果流星离开视野之内，销毁流星实例，回收内存
        if (meteor.flow()) {
          meteor.draw();
        } else {
          arr.splice(index, 1);
        }
      })
      requestAnimationFrame(frame);
    }
    meteorGenerator();
    frame();
  },
  components: {

  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  #login
    width 100%
    height 100%
    // width calc(100% - 2px)
    text-align center
    display flex
    align-items center
    justify-content center
    background no-repeat center center
    background-size cover
    .content
      width 20%
      margin 30% auto
      z-index 2
      .ivu-input
        background none !important
        border none
        border-radius 0
        border-bottom 2px solid #fff
        color #fff
        &:hover,
        &:focus
          border none
          border-bottom 2px solid #fff
          box-shadow none
      .ivu-icon
        color #fff
        margin-right 20px
      div
        display flex
        margin-bottom 20px
      button
        background none !important
        border 2px solid #fff
    .city
      position fixed
      bottom 0px
      left 0
      right 0
      width 100%
      z-index 2
    .moon
      position: fixed;
      left 100px
      top 100px
      width 200px
      z-index 2
  #canvas
    position fixed
    z-index 1
  @media only screen and (max-width: 768px){
    #login .moon {
      position: fixed;
      left: 20px;
      top: 50px;
      width: 100px;
      z-index: 2;
    }
    #login .content {
      width 60%
    }
  }
</style>
